<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/Navigation.js"></script>
    <style>
         * {
            margin: 0;
        }

        body {
            /* background-image: url(images/login_bg2.jpg);
            background-size:100%;
            background-repeat: no-repeat; */
            background-color: rgb(231, 234, 243);
        }

        
        .content {
            width: 1000px;
            margin: 70px auto;
            background-color: #fff;
            /* border: 1px solid #fff; */
        }
        .content_left{
            /* border: 1px solid #fff; */
            width: 700px;
            float: left;
        }
        .left_top{
            width: 700px;
            height: 300px;
            background-color: #fff;
            opacity: 0.9;
            box-shadow: 0 0 5px 2px rgb(204, 217, 235);
            position: relative;
            padding: 0;
        }
        .left_top img{
            height: 300px;
            width: 300px;
            float: left;
        }
        .left_main{
            width: 700px;
            height: 100%;
            background-color: #fff;
            opacity: 0.9;
            box-shadow: 0 0 5px 2px rgb(204, 217, 235);
            position: relative;
            margin:10px 0;
            padding-bottom: 20px;
        }
        .content_right{
            /* border: 1px solid #fff; */
            width: 290px;
            float: right;
        }
        .right_top{
            width: 290px;
            height: 350px;
            background-color: #fff;
            opacity: 0.9;
            box-shadow: 0 0 5px 2px rgb(204, 217, 235);
            position: relative;
        }
        .right_bottom{
            width: 290px;
            height: 500px;
            margin:10px 0;
            background-color: #fff;
            opacity: 0.9;
            box-shadow: 0 0 5px 2px rgb(204, 217, 235);
            position: relative;
        }
        .left_main .nav ul{
            list-style: none;
            padding: 0;
            border-bottom: 1px solid #eee;
            margin: 5px 0;
        }
        .left_main .nav li{
            display: inline-block;
            width: 70px;
            height: 60px;
            /* background-color: aquamarine; */
            text-align: center;
            line-height: 60px;
            margin: 0 10px;
        }
        #left_content1{
            width: 700px;
            background-color: #fff;
            opacity: 0.9;
            position: relative;
        }
        #left_content2{
            width: 700px;
            background-color: #fff;
            opacity: 0.9;
            position: relative;
            display: none;
        }
        #left_content2 ul{
            list-style: none;
            padding: 0;
        }
        #left_content2 li{
            width: 650px;
            background-color: #fff;
            padding: 0 20px;
            border-bottom: 1px solid #eee;
            position: relative;
        }
        #left_content1 ul{
            list-style: none;
            padding: 0;
        }
        #left_content2 h3{
            height: 80px;
            line-height: 80px;
            font-weight: 400;
        }
        #left_content2 span{
            display: block;
            height: 40px;
            font-size: 13px;
            color: #aaa;
        }
        #left_content1 li{
            width: 650px;
            background-color: #fff;
            padding: 0 20px;
            border-bottom: 1px solid #eee;
            position: relative;
        }
        #left_content1 h3{
            height: 80px;
            line-height: 80px;
            font-weight: 400;
        }
        #left_content1 span{
            display: block;
            height: 40px;
            font-size: 13px;
            color: #aaa;
        }
        .wknow{
            width: 90px;
            height: 35px;
            background-color: rgb(89, 81, 165);
            border-radius: 20px;
            text-align: center;
            line-height: 35px;
            color: #fff;
            font-weight: 600;
            position: absolute;
            right: 0;
            bottom: 20px;
        }
        .left_top>img{
            width: 300px;
            height: 300px;
            border-radius: 2%;
        }
        .left_top>h3{
            width: 400px;
            height: 40px;
            line-height: 40px;
            font-size: 20px;
            position: relative;
            float: left;
            left: 100px;
            /* margin-left: 20px; */
        }
        .left_top>p{
            width: 380px;
            height: 150px;
            float: left;
            margin: 10px;
            font-family: 宋体;
            /* padding: 5px; */
        }
        .left_top_bottom{
            width: 400px;
            height: 50px;
            position: relative;
            float: left;
        }
        .left_top_bottom>input{
            width: 100px;
            height: 30px;
            float: right;
            /* padding-right: 50px; */
            margin-right: 50px;
            background-color: blue;
            color: white;
            border-radius: 10%;
        }
        .left_top_bottom>span{
            margin-left: 20px;
            padding-top: 10px;
        }
        .right_top_title{
            width: 280px;
            height: 40px;
            line-height: 40px;
            margin-left: 10px;
            font-size: 20px;
            font-family: 黑体;
            border-bottom: 1px solid #ccc;
        }
        .right_top_title1>ul{
            list-style: none;
            padding-inline-start: 0px;
        }
        .right_top_title1>ul>li{
            width: 290px;
            height: 90px;
        }
        .right_top_title1>ul>li>img{
            width: 80px;
            height: 80px;
            border-radius: 50%;
            float: left;
        }
        .right_top_title1>ul>li>p{
            padding-top: 20px;
            font-size: 15px;
            font-family: 宋体;
        }
    </style>
    <script src="https://cdn.bootcdn.net/ajax/libs/Mock.js/1.0.1-beta3/mock-min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
         $(function(){
        var Random = Mock.Random
        Mock.mock("http://localhost:5500/api/getAllUsers",function(){
        var result = []
        for(var i=0;i<6;i++){
            var journalism = Mock.mock({
                'title':Random.csentence(5,10),
                 "read|1-100":100,
                 "want|1-40000":100,
            })
            result.push(journalism)
        }
        return result  
    })

    $.ajax({
        url:'http://localhost:5500/api/getAllUsers',
        type:'get',
        dataType:'json',
        success:function(e){
            // console.log(e)
            var strHTML = ''
            for(var i=0;i<e.length;i++){
                strHTML+=`<li>
                            <h3>${e[i].title}</h3>
                            <span>${e[i].read}万浏览&nbsp;·&nbsp;${e[i].want}人想知道答案</span>
                            <div class="wknow">想知道</div>
                        </li>`
            }
            $('#question').html(strHTML)
            $('#question1').html(strHTML)
        }
        })

        $.ajax({
        url:'http://localhost:5500/api/getAllUsers',
        type:'get',
        dataType:'json',
        success:function(e){
            // console.log(e)
            var strHTML = ''
            for(var i=0;i<e.length;i++){
                strHTML+=`<li>
                            <h3>${e[i].title}</h3>
                            <span>${e[i].read}万浏览&nbsp;·&nbsp;${e[i].want}人想知道答案</span>
                            <div class="wknow">想知道</div>
                        </li>`
            }
            // $('#question').html(strHTML)
            $('#question1').html(strHTML)
        }
        })
        // 页面条转向携带的信息
        console.log(document.querySelector('.left_top').firstElementChild.nextElementSibling.innerHTML)
        if(sessionStorage['roundInfo']){
            var roundInfo = JSON.parse(sessionStorage['roundInfo'])

            var roundImg = document.querySelector('.left_top').firstElementChild
            var headTitle = document.querySelector('.left_top').firstElementChild.nextElementSibling
           roundImg.src = roundInfo[0].roundImg
            headTitle.innerHTML  = roundInfo[0].roundName
        }
         })
         function changefile1(){
             document.querySelector('#left_content1').style.display = 'block'
             document.querySelector('#left_content2').style.display = 'none'
         }
         function changefile2(){
             document.querySelector('#left_content2').style.display = 'block'
             document.querySelector('#left_content1').style.display = 'none'
         }


      
    </script>
</head>
<body>
    <!-- 导航栏 -->
    <div id="Navigation"></div>

    <!-- 内容板块 -->
    <div class="content">
        <div class="content_left">
            <div class="left_top">
                <img src="https://pic3.zhimg.com/50/v2-70571dd7fd6908102b930ddb554e558b_720w.jpg?source=b1f6dc53" alt="">
                <h3>上海插班生考试概况</h3>
                <p id="contents">人生真的有后悔药吗？高考失利，除了复读还有其他途径吗？ 
                    上海插班生考试，是上海教委的一项特殊政策；也是上海提供给选择她的学子们再一次择校的机会。 我们希望通过此次圆</p>
                    <div class="left_top_bottom">
                        <span>81.3 万浏览 · 23 关注</span> <input type="button" value="关注圆桌">
                    </div>
            </div>
        


            <div class="left_main">
                <div class="nav">
                    <ul>
                        <li onclick="changefile1()">精选议题</li>
                        <li onclick="changefile2()">最新提问</li>
                    </ul>
                </div>
                <div id="left_content1">
                    <ul id="question">
                        <li>
                            <h3>晒黑后如何美白?</h3>
                            <span>148万浏览&nbsp;·&nbsp;4563人想知道答案</span>
                            <div class="wknow">想知道</div>
                        </li>
                    </ul>
                </div>


                <div id="left_content2">
                    <ul id="question1">
                        <li>
                            <h3>晒黑后如何美白?</h3>
                            <span>148万浏览&nbsp;·&nbsp;4563人想知道答案</span>
                            <div class="wknow">想知道</div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="content_right">
            <div class="right_top">
                <div class="right_top_title">
                    主办方
                </div>
                <div class="right_top_title1">
                <ul>
                    <li>
                        <img  src="https://pic3.zhimg.com/v2-0a8caf7843d8da2ef3af58b409790960.jpg?source=b1f6dc53">
                        <p style="float: left; font-size: 18px; font-family: 黑体;">这就不知道了</p>
                        <p style="float: left; padding-top: 8px;">已认证官方专用账号</p>
                    </li>
                    <li>
                        <img  src="https://pic3.zhimg.com/v2-0a8caf7843d8da2ef3af58b409790960.jpg?source=b1f6dc53">
                        <p style="float: left; font-size: 18px; font-family: 黑体;">这就不知道了</p>
                        <p style="float: left; padding-top: 8px;">已认证官方专用账号</p>
                    </li>
                    <li>
                        <img  src="https://pic3.zhimg.com/v2-0a8caf7843d8da2ef3af58b409790960.jpg?source=b1f6dc53">
                        <p style="float: left; font-size: 18px; font-family: 黑体;">这就不知道了</p>
                        <p style="float: left; padding-top: 8px;">已认证官方专用账号</p>
                    </li>
                </ul>
            </div>
            </div>
            <div class="right_bottom">
                <div class="right_top_title">
                    特邀嘉宾
                </div>
                <div class="right_top_title1">
                <ul>
                    <li>
                        <img  src="https://pic3.zhimg.com/v2-0a8caf7843d8da2ef3af58b409790960.jpg?source=b1f6dc53">
                        <p style="float: left; font-size: 18px; font-family: 黑体;">这就不知道了</p>
                        <p style="float: left; padding-top: 8px;">已认证官方专用账号</p>
                    </li>
                    <li>
                        <img  src="https://pic3.zhimg.com/v2-0a8caf7843d8da2ef3af58b409790960.jpg?source=b1f6dc53">
                        <p style="float: left; font-size: 18px; font-family: 黑体;">这就不知道了</p>
                        <p style="float: left; padding-top: 8px;">已认证官方专用账号</p>
                    </li>
                    <li>
                        <img  src="https://pic3.zhimg.com/v2-0a8caf7843d8da2ef3af58b409790960.jpg?source=b1f6dc53">
                        <p style="float: left; font-size: 18px; font-family: 黑体;">这就不知道了</p>
                        <p style="float: left; padding-top: 8px;">已认证官方专用账号</p>
                    </li>
            </div>
        </div>

        
    </div>

    <script>
        $("#Navigation").load("Navigation.html");
    </script>
</body>
</html>